<!--
 * @Author: MarsLay
 * @Date: 2021-12-27 10:54:10
 * @LastEditTime: 2024-02-02 10:27:20
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义头像组件，动态传值显示头像，可通过slot动态插入样式
 * @FilePath: components\avatar\avatar.vue
-->
<template>
  <view class="container">
    <view class="header" :style="{ height: navInfo.navHeight + 'px', background: headerBg }">
      <view class="inner"
        :style="{ height: navInfo.menuHeight + 'px', minHeight: navInfo.menuHeight + 'px', lineHeight: navInfo.menuHeight + 'px', bottom: navInfo.menuBottom + 'px' }">
        <view v-if="canback" @click="back" class="back">
          <image mode="aspectFit" class="icon"
            :src="transparent ? '../../static/img/icon/back-b.png' : '../../static/img/icon/back-w.png'">
          </image>
        </view>
        <view class="title" :class="{ 'all-title': (!canback && !search) || (canback && !search) }"
          :style="{ color: titleColor }">{{ title }}</view>
      </view>
    </view>
    <view class="page-inner" :class="{ 'has-btn': hasbtn }" :style="{ top: `calc(${navInfo.navHeight}px)` }">
      <slot></slot>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "page",
  components: {},
  props: {
    canback: {
      type: Boolean,
      default: false,
    },
    callback: {
      type: Boolean,
      default: false,
    },
    search: {
      type: Boolean,
      default: false,
    },
    transparent: {
      type: Boolean,
      default: true,
    },
    hasbtn: {
      type: Boolean,
      default: false,
    },
    headerBg: {
      type: String,
      default: '#ffffff',
    },
    titleColor: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(['navInfo']),
  },
  watch: {},
  created() { },
  onLoad(d) { },
  onShow() { },
  methods: {
    back() {
      if (this.callback) {
        this.$emit("back");
        return;
      }
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2]; // 上一页
      beforePage.data.refreshIfNeeded = true;
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style lang='less' scoped>
.header {
  z-index: 10;
  position: relative;

  .inner {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;

    .back {
      .flex();
      width: 50upx;
      height: 50upx;

      .icon {
        margin-left: 28upx;
        width: 16upx;
        height: 32upx;
      }
    }

    .title {
      margin: 0 28upx 0 16upx;
      font-size: 32upx;
      font-weight: 500;
      color: #000000;
    }

    .all-title {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50upx;
      right: 50upx;
      margin: 0;
      text-align: center;
    }
  }
}

.page-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
  background-color: #F5F5F5;
}
</style>